<template>
  <header class="app-header">
    <div class="logo">QPixel</div>
    <nav class="navigation">
      <router-link
        v-for="route in routerList"
        :key="route.path"
        :to="route.path"
      >
        {{ route.name || route.path }}
        <!-- 使用路由名称或路径作为链接文本 -->
      </router-link>
    </nav>
  </header>
</template>

<script setup>
const routerList = [
  {
    path: "/",
    name: "主页",
  },
  {
    path: "/system-status",
    name: "系统状态",
  },
  {
    path: "/project-management",
    name: "工程管理",
  },
  {
    path: "/instance-management",
    name: "实例管理",
  },
  {
    path: "/api-docs",
    name: "API文档",
  },
  {
    path: "/instance-demo",
    name: "实例测试",
  },
];
// Header component logic can be added here if needed
</script>

<style scoped>
.app-header {
  width: 100%; /* 占满宽度 */
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #f8f9fa; /* Light background */
  border-bottom: 1px solid #dee2e6; /* Subtle border */
  box-sizing: border-box; /* 防止 padding 影响宽度 */
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.navigation a {
  margin-left: 1rem;
  text-decoration: none;
  color: #007bff; /* Blue links */
}

.navigation a:hover {
  text-decoration: underline;
}
</style>
